<template>
    <div>
        <div class="button">
            <addBU></addBU>
            <addbrand></addbrand>
            <addproductCategory></addproductCategory>
            <addproduct></addproduct>
        </div>
        <div class="backForm">
            <v-form class="form" @onSubmit="onSubmit" v-if="loadForm"></v-form>
            <basicInfo
                ref="basicInfo"
                class="basicInfo"
                @getBasicInfo="getBasicInfo"
                v-loading="loading"
            ></basicInfo>
        </div>
        <div class="tabs" v-loading="loading">
            <tabs v-if="!tabsHide" ref="tabs" :basicInfo="basicInfo"></tabs>
            <el-alert v-if="tabsHide && !loading" show-icon title="有没找到相关产品" type="info" center></el-alert>
        </div>
    </div>
</template>
<script>
import vForm from "./form.vue";
import basicInfo from "./basicInfo.vue";
import tabs from "./tabs.vue";

export default {
    data() {
        return {
            loading: true,
            tabsHide: true,
            basicInfo: {},
            loadForm: true
        };
    },
    methods: {
        onSubmit(form) {
            this.$nextTick(() => {
                this.loading = true;
                this.tabsHide = true;
                this.$refs.basicInfo.onSubmit(form);
            });
        },
        getBasicInfo(val) {
            this.loading = false;
            this.basicInfo = val;
            if (val.productId === 0 || !val.productId) {
                this.tabsHide = true;
            } else {
                this.tabsHide = false;
            }
        }
    },
    components: {
        vForm,
        basicInfo,
        tabs,
        addBU: resolve => require(["./addBU.vue"], resolve),
        addbrand: resolve => require(["./addbrand.vue"], resolve),
        addproductCategory: resolve =>
            require(["./addproductCategory.vue"], resolve),
        addproduct: resolve => require(["./addproduct.vue"], resolve)
    }
};
</script>
<style lang="stylus" scoped>
.button{
    padding 10px 10px 0 10px
}
.backForm {
    padding: 10px;
    margin: 10px 0 0 0 !important;
    background: #ebeef5;
    display: flex;

    .form {
        flex: 0 0 240px;
        width: 240px;
    }

    .basicInfo {
        flex: 1;
        margin-left: 10px;
    }
}

.tabs {
    margin-bottom: 10px;
    min-height: 200px;
}
</style>